import React from "react";
import Chart from "echarts-for-react";
import style from "./ProHistoryTu.less";

class ProHistoryTu extends React.Component {
  
    setOption = () => {
        return {
            title: {
                text: "报警等级分布图",
               left:'center',
               top:0
               
            },
            color: ["#3678DE", "#294972", "#2EC2FF"],
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
              
                x: "center",
                data: ["普通报警", "重要报警"],
              y:'bottom',
              bottom:100,
            pageButtonGap:10
                
            },
            series: [
                {
                    type: "pie",
                    radius: ["50%", "70%"],
                    center:['50%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: "center"
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: "20",
                                fontWeight: "bold"
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:this.props.data?this.props.data:[]
                }
            ]
        };
    }

    render() {
        console.log(this.props)
        return (



                <div id="main" className={style.main}>
                    <Chart option={this.setOption()} notMerge lazyUpdate />
                </div>

        );
    }
}

export default ProHistoryTu;
